import React, { Component } from 'react'
import axios from 'axios'
import Alert from '../../components/alert'
import Context from '../../utils/context'

export default class List extends Component {
    state = {
        floorList: [],
        nowIndex: 0,
        isShow1: false,
        con: {},
        ani:'animate__backInRight'
    }
    componentDidMount() {
        axios.get('/data/list.json').then(({ data }) => {
            this.setState({ floorList: data })
        })
    }
    render() {
        let { floorList, nowIndex, isShow1, con } = this.state;
        console.log(floorList);
        return (
            <div className='List'>
                <div className="left">
                    <ul>
                        {
                            floorList.map((item, index) => {
                                return (
                                    <li onClick={() => { this.tab(index) }} className={nowIndex === index ? 'active' : null} key={index}>{item.title}</li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="right" ref={c => this.c = c} onTouchMove={this.rightS}>
                    {
                        floorList.map((item, index) => {
                            return (
                                <div key={index} className='rightItem' ref={'rightItem' + index}>
                                    <h1>{item.title}</h1>
                                    <div>
                                        {
                                            item.content.map((pro, idx) => {
                                                return (
                                                    <div key={idx} onClick={() => { this.alert1(pro);this.setState({ ani:'animate__backInRight'}) }}>
                                                        <img src={pro.img} alt="" />
                                                        <h2>{pro.name}</h2>
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                {isShow1 ? <Context.Provider value={{ con, closeAlert1: this.closeAlert1,ani:this.state.ani }}><Alert /></Context.Provider> : null}
            </div>
        )
    }
    tab = (index) => {
        this.setState({ nowIndex: index })
        console.log(this);
        this.c.scrollTo({
            top: this.refs['rightItem' + index].offsetTop,
            behavior: 'smooth'
        })

    }
    rightS = () => {
        Object.keys(this.refs).forEach((item, index) => {
            if (this.c.scrollTop >= this.refs[item].offsetTop) {
                this.setState({ nowIndex: index })
            }
        })
    }
    alert1 = (pro) => {
        this.setState({ isShow1: true, con: pro })
    }
    closeAlert1 = () => {
        this.setState({ ani:'animate__backOutRight' },()=>{
            setTimeout(()=>{
                this.setState({isShow1: false})
            },500)
        })
    }
}
